<template>
  <div class="homePage">
    <load-ing v-show="inSearching" id="saerchingLoading"></load-ing>
    <scroller-box
      id="scroll"
      ref="scroll"
      :dataList="homeData"
      :pullDownRefresh="DOWN_CONFIG"
      :pullUpLoad="UP_CONFIG"
      :scrollToEndFlag="scrollToEndFlag"
      :beforePullUpWord="beforePullUpWord"
      @onPullUp="pullUpHandle"
      @onPullDown="pullDownHandle"
    >
      <div v-for="(item, index) in homeData" :key="item.FID" :data-FID="item.FID" :data-index="index" class="content-box">
        <div class="showTime"> {{ item.FCreatTime }} </div>
        <div class="showWrapper" @click="exhibition(item.FID, index, $event)">
          <img :src="$store.state.baseURL + '/api/Filse/GetAdvertImg?FID=' + item.FID" >
          <div class="showText">
            <a></a>
            <span></span>
          </div>
        </div>
      </div>
    </scroller-box>
    <one-menu></one-menu>
    <router-view />
  </div>
</template>

<script>
import oneMenu from '@/common/menu/menu.vue'
import { getExcludeHeight, DEVICE_RATIO, DOWN_CONFIG, UP_CONFIG } from '@/until/until.js'
import loadIng from '@/common/loading/loading.vue'
import scrollerBox from '@/common/scroller/scroller.vue'

export default {
  components: {
    oneMenu,
    scrollerBox,
    loadIng
  },
  data() {
    return {
      homeData: [],
      page: 1,
      pageSize: 5,
      inSearching: false,
      scrollToEndFlag: false,
      beforePullUpWord: '上拉加载更多',
      DEVICE_RATIO,
      DOWN_CONFIG,
      UP_CONFIG
    }
  },
  computed: {
    scrollElement() {
      return this.$refs.scroll
    }
  },
  watch: {
    homeData() {
      this.$nextTick(() => {
        getExcludeHeight(this.$refs.scroll)
        // this.box.addEventListener('scroll', () => {
        //   console.log(this.$refs.viewBox.scrollTop)
        // }, false)
        // this.$refs.content.style.height = `${newHeigh}px`
      })
    }
  },
  created() {
    // this.getContentData()
  },
  mounted() {
    this.getContentData()
    // console.log(this.$store.state)
  },
  methods: {
    getContentData(callback) {
      const getPage = { curr: this.page || 1, pageSize: this.pageSize }
      this.$axios.post('/api/LoanAdvert/GetLoanAdvert', getPage)
        .then((response) => {
          const res = response.data
          if (res.object.length > 0) {
            callback && callback(res)
          } else {
            this.scrollElement.finish('PullUp')
            this.beforePullUpWord = '暂无更多数据'
          }
          if (this.page == 1) { // 初始化时加载
            this.homeData = res.object
          }

          this.page++
          // this.$nextTick(()=>{ //在修改数据之后立即使用这个方法，获取更新后的 DOM
          //   const H = this.$refs.content.offsetHeight
          //   console.log(H)
          // })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    exhibition(FID, index, $event) {
      const thisIndex = Math.ceil((index + 1) / 5)
      const ThisParams = { FID: FID, curr: thisIndex }
      // console.log(FContent, thisIndex)
      this.$router.push({ path: '/homeEdit', query: ThisParams }) // //类似get传参，通过URL传递参
      // $event.currentTarget dom元素
      // 对象
      // this.$router.push({ path: '/home/first' })
      // 命名的路由
      // this.$router.push({ name: 'home', params: { FContent: FContent,  pageSize: thisIndex }})
    },
    pullUpHandle(val) { // 向下加载
      this.getContentData((res) => {
        this.scrollElement.PullingUpWord = '加载完成'
        setTimeout(() => {
          this.scrollElement.finish('PullUp')
          this.homeData = this.homeData.concat(res.object)
        }, 1000)
      })
    },
    pullDownHandle(val) { // 向上刷新
      setTimeout(() => {
        this.scrollElement.finish('PullDown')
        this.page = 1
        this.getContentData()
        // const l = this.homeData.length
        // const random = Math.floor(Math.random() * l)
        // this.homeData.unshift(this.homeData[random])
      }, 2000)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
